<template>
  <view class="verify-detail">
    <scroll-view class="detail-scroll" scroll-y>
      <view class="detail-content">
        <!-- 核销状态卡片 -->
        <view class="status-card">
          <view class="status-header">
            <uni-icons type="checkmarkempty" size="32" color="#fff" />
            <text class="status-text">核销成功</text>
          </view>
          <text class="status-time">{{ formatDateTime(verifyData.verifyTime) }}</text>
        </view>

        <!-- 订单信息 -->
        <view class="info-section">
          <view class="section-header">
            <text class="section-title">订单信息</text>
          </view>
          <view class="info-card">
            <view class="info-list">
              <view class="info-item">
                <text class="info-label">订单号</text>
                <text class="info-value">{{ verifyData.orderNo }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">用户名</text>
                <text class="info-value">{{ verifyData.username }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">订单金额</text>
                <text class="info-value price">¥{{ formatPrice(verifyData.orderAmount) }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 核销信息 -->
        <view class="info-section">
          <view class="section-header">
            <text class="section-title">核销信息</text>
          </view>
          <view class="info-card">
            <view class="info-list">
              <view class="info-item">
                <text class="info-label">核销门店</text>
                <text class="info-value">{{ verifyData.storeName }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">操作员</text>
                <text class="info-value">{{ verifyData.operatorName }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">核销时间</text>
                <text class="info-value">{{ formatDateTime(verifyData.verifyTime) }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 备注信息 -->
        <view class="info-section" v-if="verifyData.remark">
          <view class="section-header">
            <text class="section-title">备注信息</text>
          </view>
          <view class="info-card">
            <text class="remark-text">{{ verifyData.remark }}</text>
          </view>
        </view>

        <!-- 核销凭证 -->
        <view class="info-section">
          <view class="section-header">
            <text class="section-title">核销凭证</text>
          </view>
          <view class="voucher-card">
            <view class="voucher-header">
              <text class="voucher-title">团购券核销凭证</text>
              <text class="voucher-no">凭证号：{{ generateVoucherNo() }}</text>
            </view>
            
            <view class="voucher-body">
              <view class="voucher-info">
                <text class="voucher-label">订单号：</text>
                <text class="voucher-value">{{ verifyData.orderNo }}</text>
              </view>
              <view class="voucher-info">
                <text class="voucher-label">核销时间：</text>
                <text class="voucher-value">{{ formatDateTime(verifyData.verifyTime) }}</text>
              </view>
              <view class="voucher-info">
                <text class="voucher-label">核销金额：</text>
                <text class="voucher-value">¥{{ formatPrice(verifyData.orderAmount) }}</text>
              </view>
            </view>
            
            <view class="voucher-footer">
              <text class="voucher-stamp">已核销</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <button class="action-btn secondary" @click="shareVoucher">
        分享凭证
      </button>
      <button class="action-btn primary" @click="printVoucher">
        打印凭证
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { verifyApi } from '@/api/groupbuy';
import type { VerifyRecord } from '@/types/groupbuy';

// 数据
const verifyData = ref<VerifyRecord>({} as VerifyRecord);
const verifyId = ref<number>(0);
const loading = ref(false);

// 格式化价格
const formatPrice = (price: number) => {
  return (price / 100).toFixed(2);
};

// 格式化日期时间
const formatDateTime = (timestamp: number) => {
  const date = new Date(timestamp * 1000);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
};

// 生成凭证号
const generateVoucherNo = () => {
  const date = new Date(verifyData.value.verifyTime * 1000);
  const dateStr = `${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`;
  return `V${dateStr}${verifyData.value.id.toString().padStart(6, '0')}`;
};

// 加载核销详情
const loadVerifyDetail = async () => {
  if (!verifyId.value) return;
  
  try {
    loading.value = true;
    const res = await verifyApi.getDetail(verifyId.value);
    if (res.success) {
      verifyData.value = res.data;
    } else {
      uni.showToast({
        title: res.message || '加载失败',
        icon: 'none',
      });
    }
  } catch (error) {
    console.error('加载核销详情失败:', error);
    uni.showToast({
      title: '加载失败',
      icon: 'none',
    });
  } finally {
    loading.value = false;
  }
};

// 分享凭证
const shareVoucher = () => {
  uni.showActionSheet({
    itemList: ['微信分享', '保存图片', '复制链接'],
    success: (res) => {
      switch (res.tapIndex) {
        case 0:
          // 微信分享
          uni.showToast({
            title: '功能开发中',
            icon: 'none',
          });
          break;
        case 1:
          // 保存图片
          saveVoucherImage();
          break;
        case 2:
          // 复制链接
          copyVoucherLink();
          break;
      }
    }
  });
};

// 保存凭证图片
const saveVoucherImage = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
  });
};

// 复制凭证链接
const copyVoucherLink = () => {
  const link = `https://example.com/verify/${verifyId.value}`;
  uni.setClipboardData({
    data: link,
    success: () => {
      uni.showToast({
        title: '链接已复制',
        icon: 'success',
      });
    }
  });
};

// 打印凭证
const printVoucher = () => {
  uni.showModal({
    title: '打印凭证',
    content: '确定要打印此核销凭证吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '功能开发中',
          icon: 'none',
        });
      }
    }
  });
};

// 页面加载
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = (currentPage as any).options;
  
  if (options.id) {
    verifyId.value = parseInt(options.id);
    loadVerifyDetail();
  }
});
</script>

<style lang="scss" scoped>
.verify-detail {
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.detail-scroll {
  flex: 1;
}

.detail-content {
  padding: 24rpx 32rpx 120rpx;
}

.status-card {
  background: linear-gradient(135deg, #52C41A 0%, #73D13D 100%);
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  color: #fff;
  text-align: center;
  
  .status-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    margin-bottom: 12rpx;
    
    .status-text {
      font-size: 32rpx;
      font-weight: 600;
    }
  }
  
  .status-time {
    font-size: 26rpx;
    opacity: 0.9;
  }
}

.info-section {
  margin-bottom: 32rpx;
  
  .section-header {
    margin-bottom: 16rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
}

.info-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .info-list {
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-label {
        width: 160rpx;
        font-size: 28rpx;
        color: #666;
        flex-shrink: 0;
      }
      
      .info-value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        
        &.price {
          font-weight: 600;
          color: #FF4D4F;
        }
      }
    }
  }
  
  .remark-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
}

.voucher-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8rpx;
    background: linear-gradient(90deg, #1890FF 0%, #40A9FF 100%);
  }
  
  .voucher-header {
    text-align: center;
    margin-bottom: 32rpx;
    padding-bottom: 24rpx;
    border-bottom: 2rpx dashed #f0f0f0;
    
    .voucher-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      display: block;
      margin-bottom: 12rpx;
    }
    
    .voucher-no {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .voucher-body {
    margin-bottom: 32rpx;
    
    .voucher-info {
      display: flex;
      margin-bottom: 16rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .voucher-label {
        width: 160rpx;
        font-size: 26rpx;
        color: #666;
        flex-shrink: 0;
      }
      
      .voucher-value {
        flex: 1;
        font-size: 26rpx;
        color: #333;
      }
    }
  }
  
  .voucher-footer {
    text-align: center;
    padding-top: 24rpx;
    border-top: 2rpx dashed #f0f0f0;
    
    .voucher-stamp {
      display: inline-block;
      padding: 12rpx 32rpx;
      border: 4rpx solid #52C41A;
      border-radius: 8rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #52C41A;
      transform: rotate(-15deg);
    }
  }
}

.bottom-actions {
  display: flex;
  padding: 24rpx 32rpx;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  gap: 24rpx;
  
  .action-btn {
    flex: 1;
    height: 88rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
    border: none;
    
    &.primary {
      background: #1890FF;
      color: #fff;
    }
    
    &.secondary {
      background: #f5f5f5;
      color: #666;
    }
  }
}
</style>